<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入任务名称，按Enter确认" v-model="title" @keyup.enter="onAdd">

    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from 'vue';
// 引入接口
import { ITodo } from '@/types/todo'

export default defineComponent({
    name: 'Header',
    props: { // 父组件中传递过来的方法
        addTodo: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        const title = ref('');


        // 回车事件的处理函数，用来添加数据
        const onAdd = () => {
            const text = title.value;
            // 输入的内容不能为空
            if(!text.trim()) return;

            // 创建todo对象
            const todo: ITodo = {
                id: Date.now(),
                title: text,
                isCompleted: false
            }

            // 调用父组件的方法加入数据
            props.addTodo(todo)

            // 清空文本
            title.value = '';
        }

        return {
            title,
            onAdd,
        }
    }
})

</script>

<style scoped lang="scss">
.todo-header {
    width: 100%;

    input {
        width: calc(100% - 14px);
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;

        &:focus {
            outline: none;
            border-color: rgba(82, 168, 236, 0.8);
        }
    }
}
</style>